<template>
  <div class="option_item">
    <el-radio-group v-model="choice" v-show="questionType === 1">
      <el-radio :label="transASCIICode" style="margin-right:0px">{{transASCIICode}}：</el-radio>
    </el-radio-group>
    <el-checkbox-group v-model="checkList" v-show="questionType === 2" style="display: inline-block">
      <el-checkbox :label="transASCIICode" >{{transASCIICode}}：</el-checkbox>
    </el-checkbox-group>
    <!-- input输入框 -->
    <el-input v-model="answerText" style="width: 240px"></el-input>
    <!-- 上传图片的控件 -->
    <div class="avatar-uploader" style="margin-left:4px; display: inline-block;" :class="{'disabled': isDisabled}">
      <el-upload
        action="#"
        :auto-upload="false"
        list-type="picture-card"
        :limit="limit"
        :on-change="onChange"
        :on-remove="handleRemove"
        :http-request="httpRequest"
      >
      <span>上传图片</span>
      </el-upload>
    </div>
  </div>
</template>

<script>
import cos from '@/utils/cos.js'
export default {
  name: 'questionNewOptions',
  props: {
    questionType: {
      default: 1,
      type: Number
    },
    transASCIICode: {
      default: 'A',
      type: String
    }
  },
  watch: {
    choice (newVal) {
      if (newVal !== '') {

      }
    }

  },
  computed: {
    isDisabled () {
      return this.fileList.length >= this.limit
    }
  },
  data () {
    return {
      limit: 1,
      fileList: [],
      choice: '',
      answerText: '',
      checkList: []
    }
  },
  methods: {
    /**
     * file：表示的上传的数据
     * fileList: 表示的DOM元素中对应的数据
     */
    onChange (file, fileList) {
      console.log(file)
      console.log(fileList)
      this.fileList = [...fileList]
    },
    handleRemove (file, fileList) {
      // 1.数据删除后 同步的方式, 在这里采用直接赋值的话, 因为数据类型是数组复杂数据类型, 直接赋值改变了data里this.fileList在内存中的地址
      // this.fileList = [...fileList]
      // 2.数据删除后 同步的方式2 uid是图片上传后 elementUI组件给图片的唯一标识值是时间戳
      this.fileList = this.fileList.filter(item => item.uid !== file.uid)
    },
    /**
     * 自定义上传
     */
    httpRequest ({ file }) {
      if (!file) return
      console.log(file)
      // 拿到当前上传的文件
      const currentFile = this.fileList.find(item => item.uid === file.uid)
      // 将上传状态设置为 'uploading'
      currentFile.status = 'uploading'
      cos.putObject({
        Bucket: 'hrsass-152-1316190622', /* 填入您自己的存储桶，必须字段 (自己的存储桶的名字) */
        Region: 'ap-beijing', /* 存储桶所在地域，例如ap-beijing，必须字段 */
        Key: +new Date() + file.name, /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
        Body: file, /* 必须，上传文件对象，可以是input[type="file"]标签选择本地文件后得到的file对象 */
        onProgress: function (progressData) {
          console.log(JSON.stringify(progressData))
          // 显示上传的百分比进度
          currentFile.percentage = progressData.percent * 100
        }
      }, function (err, data) {
        // console.log(err || data)
        if (err) {
          this.$message.warning('图片上传失败, 请稍后再试')
          return
        }
        // 使用'//' 会自动把网站对应的协议和地址拼接到一起
        const url = '//' + data.Location
        currentFile.url = url
        // 延时目的: 可以更清楚的看到进度条的加载
        setTimeout(() => {
          currentFile.status = 'success'
        }, 500)
      })
    }
  }

}
</script>

<style lang="scss" scoped>
.option_item {
  margin-bottom:20px
}
::v-deep .el-upload--picture-card {
  width: 100px;
  height: 60px;
  line-height: 60px;
  // border: 1px dashed #d9d9d9;
  // border-radius: 6px;
  vertical-align: middle;
}
::v-deep .el-upload-list__item-actions {
  width: 100px;
  height: 60px;
  border-radius: 6px;
}
::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 100px;
  height: 60px;
  border-radius: 6px;
  vertical-align: middle;
}
.disabled {
  ::v-deep{
    .el-upload--picture-card{
      display: none;
    }
  }
}

</style>
